<template>
  <div class="sidebar">
    <!-- 添加 Logo -->
    <div class="logo-container">
      <img src="/logo.png" alt="Logo" class="logo-image" style="width: 260px;height: 85px;">
    </div>
    <!-- 导航菜单 -->
    <el-menu
      router
      :default-active="activeIndex"
      background-color="#eaeaff"
      text-color="#000000"
      active-text-color="#7B66FF"
      style="height: 100%; border-radius: 20px;">
      <el-menu-item index="upload">
        <el-icon><PictureFilled /></el-icon>
        <span>艺标展区</span>
      </el-menu-item>
      <el-menu-item index="model">
        <el-icon><Brush /></el-icon>
        <span>艺标画板</span>
      </el-menu-item>
      <el-menu-item index="text-to-image">
        <el-icon><EditPen /></el-icon>
        <span>艺标文生图</span>
      </el-menu-item>
      <el-menu-item index="workflow">
        <el-icon><Share /></el-icon>
        <span>艺标工作流</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { 
  PictureFilled,
  Brush,
  EditPen,
  Share
} from '@element-plus/icons-vue'

export default {
  name: 'SidebarComponent',
  components: {
    PictureFilled,
    Brush,
    EditPen,
    Share
  },
  setup() {
    const route = useRoute()
    const activeIndex = ref(route.name)

    // 监听路由变化，更新激活项
    watch(() => route.name, (newVal) => {
      activeIndex.value = newVal
    })

    return {
      activeIndex
    }
  }
}
</script>

<style scoped>
.sidebar {
  height: 100%;
  border-right: solid 1px #e6e6e6;
  background: #c5c5e5;
  display: flex;
  flex-direction: column;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-image {
  margin-bottom: 20px;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  margin: 4px 0;
  border-radius: 4px;
  transition: all 0.3s ease;
}

:deep(.el-menu-item.is-active) {
  background-color: rgba(123, 102, 255, 0.1) !important;
  color: #7B66FF !important;
  font-weight: 500;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(123, 102, 255, 0.05) !important;
}

:deep(.el-menu-item .el-icon) {
  margin-right: 12px;
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

:deep(.el-menu-item.is-active .el-icon) {
  transform: scale(1.1);
}
</style>